<template>
<div>
    <el-row type="flex" style="margin-top: 15px;">
       <el-col class="goods-show" :offset="3" :span="18">
           <div id="box">
               <ul>
                   <li v-for="v in products" :key="v.id">
                       <!-- <el-image :src='v.productImgs[0].url' class="image"></el-image> -->
                       <img :src='v.productImgs[0].url' class="image">
                        <br>
                        <span>{{v.name}}</span>
                        <br>
                        <br>
                        <time class="time">{{ v.createTime }}</time>

                        <el-button type="text" size="small" style="float: right;" @click="find(v.id)">商品详情
                            <!-- <router-link to="/GoodsDetail"><span style="color:red">商品详情</span></router-link> -->

                        </el-button>
                        <!-- <span>{{v.createTime}}</span> -->
                   </li>
               </ul>
           </div>       
       </el-col>
    </el-row>
    <el-row>
        <el-col>
            <el-pagination
                style="float: right; margin-top: 10px;"
                background
                @current-change="goto"
                :current-page="current"
                :hide-on-single-page="true"
                layout="prev, pager, next"
                :total="total">
            </el-pagination>
        </el-col>
    </el-row>
</div>  
</template>
<script>

import http from '@/utils/request'
export default {
    data() {
    return {
        products:[],
        current:1,
        total:0,
        currentDate: "2022-1-1",
        style: { padding: '0px', width: '205px' },
        flag  :true
    }
  },
  mounted(){
      
    //   location.href="http://localhost:8080/"
      this.goto()
      
      
  },
  methods:{
      onpopstate() {  
          alert("hello");
     },
    
      goto(current=1){
          http.get('/product',{
              params:{
                  current:current,
              }
          }).then(res => {
              this.products = res.data.data.data
              window.console.log(this.products);

            //   let jpgs = res.data.data.data.productImgs[0]
            //   window.console.log(jpgs);
              this.current = res.data.data.current
              this.total = res.data.data.total
          })
      },
      find(uId){
            this.$router.push({
                path:`/GoodsDetail`,
                query:{
                    id:uId
                }
            }).then(()=>this.flag = true)            
      }
  }
}
</script>

<style scoped>
    .el-card {
        height: 296px;
    }
    .goods-show {
        display: flex;
        gap: 10px;
        flex-flow: row wrap;
    }

    .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }
  #box ul{
        display: flex;
        flex-wrap: wrap;
    }
    #box li{
        padding: 3px;
        list-style: none;
        margin-right: 15px;
        border: 1px solid #eee;
    }
    #box img{
        width: 200px;
        height: 150px;
    }
</style>
